<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<meta name="viewport"
		content="width=device-width, maximum-scale=1.0, initial-scale=1.0,initial-scale=1.0,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
    <title>在线咨询</title>
    
	<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?t=1489039620156"/>
    <link rel="stylesheet" type="text/css" href="/im/css/ukefu.css">
    <link rel="stylesheet" id="skin" type="text/css" href="/im/css/default/ukefu.css">
    <!-- kindeditor -->
    <link rel="stylesheet" type="text/css" href="/im/js/kindeditor/themes/default/default.css">
    
    <script src="/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/im/js/kindeditor/kindeditor.js"></script>
    <script type="text/javascript" src="/im/js/kindeditor/lang/zh-CN.js"></script>
    <script src="/im/js/socket.io.js"></script>
    <script type="text/javascript">
		var editor , words;
		var newmessage = [] , ring = [];
		newmessage['mp3'] = '/images/message.mp3';
		ring['mp3'] = '/images/ring.mp3';
        KindEditor.ready(function (K) {
            editor = K.create('textarea[name="content"]', {
                autoHeightMode: false,
                width: "100%",
                resizeType: 0,
                themeType: 'simple',
                fontsize: 16,
				newlineTag : "br" , 
				uploadJson : "/im/image/upload.html?userid=${userid!''}",
                allowFileManager : false,
                allowInsertUpload:false,		//增加的参数，上传图片后是否插入到当前区域
                allowImageRemote:false,
				filterMode:true,
                items: ['emoticons', 'image', 'insertfile'],
				htmlTags: {img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'] , br:[]}  ,
				afterChange : function() {
					var count = this.count() ;
					var limitNum = <#if inviteData.maxwordsnum gt 0>${inviteData.maxwordsnum}<#else>300</#if>;  //设定限制字数
					var pattern = '还可以输入' + limitNum + '字'; 
					var strValue = this.html();
					if(count > limitNum) {
						pattern = ('字数超过限制，请适当删除部分内容');
						//超过字数限制自动截取			 						
						strValue = strValue.substring(0,limitNum);
						editor.html(strValue);      
					} else {
						//计算剩余字数
						var result = limitNum - this.count(); 
						pattern = '还可以输入' +  result + '字'; 
						if(result < 20){
							document.getElementById('surplus').style.color = "red" ;	
						}else{
							document.getElementById('surplus').style.color = "#000000" ;								
						}
					}
					if(this.count("text") == 0){
						strValue= "" ;	
					}
					if(words != this.count("text")){
						socket.emit('message', {
								appid : "${appid!''}",
								userid:"${userid!''}",
								type:"writing",
								session:"${sessionid!''}",
								orgi:"${orgi!''}",
								message : strValue
						});
					}
					words = this.count("text") ;
					document.getElementById('surplus').innerHTML = count+"/"+limitNum+" , " + pattern; //输入显示
					 ////////
				},
				afterCreate : function() { //设置编辑器创建后执行的回调函数
		            var self = this;
		            <#if inviteData?? && inviteData.ctrlenter?? && inviteData.ctrlenter == true>
			            //Ctrl+Enter提交表单
			            K.ctrl(document, 13, function() {
			                self.sync();
			                sendMessage();
			            });
			            K.ctrl(self.edit.doc, 13, function() {
			                self.sync();
			                sendMessage();
			            });
		            <#else>
						var kindEditorIframe = $("iframe").contents().find("body");  
					    kindEditorIframe.keydown(function (event) {  
						if(event.keyCode==13 && !event.ctrlKey){  
						    self.sync();
							sendMessage();
							return false;
						}else if(event.keyCode==13 && event.ctrlKey){
							editor.insertHtml('<br/>');
						}
					    });  
			    		//Ctrl+Enter提交表单
						K.ctrl(document, 13, function() {
							editor.insertHtml('<br/>');
						});
						K.ctrl(self.edit.doc, 13, function() {
							editor.insertHtml('<br/>');
						});
		            </#if>
		        }
            });
        });
		KindEditor.options.cssData = "body { font-size: 15px; font-family:'Microsoft Yahei', 'Helvetica', 'Simsun', 'Arial';}";
		var R3Ajax = {
			ajax:function(opt){
				var xhr = this.createXhrObject();
				xhr.onreadystatechange = function(){
					if(xhr.readyState!=4) return ;
					(xhr.status===200 ?
						opt.success(xhr.responseText,xhr.responseXML):
						opt.error(xhr.responseText,xhr.status));
				}
				xhr.open(opt.type,opt.url,true);
				if(opt.type!=='post') 
					opt.data=null;
				else
					xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				opt.data = this.parseQuery(opt.data);
				xhr.send(opt.data);
			},
			post:function(url,success,data){
				var popt = {
					url:url,
					type:'post',
					data:data,
					success:success,
					error:function(data){}
				}
				this.ajax(popt);
			},
			get:function(url,success){
				var gopt = {
					url:url,
					type:'get',
					success:success,
					error:function(){}
				}
				this.ajax(gopt);
			},
			createXhrObject:function(){
				var methods = [
					function(){ return new XMLHttpRequest();},
					function(){ return new ActiveXObject('Msxml2.XMLHTTP');},
					function(){ return new ActiveXObject('Microsoft.XMLHTTP');}
				];
				for(var i=0;len=methods.length,i<len;i++){
					try{
						methods[i]();
					}catch(e){
						continue;
					}
					this.createXhrObject = methods[i];
					return methods[i]();
				}
				throw new Error('Could not create an XHR object.');
			},
			parseQuery:function(json){
				if(typeof json == 'object'){
					var str = '';
					for(var i in json){
						str += "&"+i+"="+encodeURIComponent(json[i]);
					}
					return str.length==0 ? str : str.substring(1);
				}else{
					return json;
				}
			},
			audioplayer:function(id, file, loop) {
			    var audioplayer = document.getElementById(id);
			    if (audioplayer != null) {
			        document.body.removeChild(audioplayer);
			    }

			    if (typeof(file) != 'undefined') {
			        if (navigator.userAgent.indexOf("MSIE") > 0) { // IE 
			            var player = document.createElement('bgsound');
			            player.id = id;
			            player.src = file['mp3'];
			            player.setAttribute('autostart', 'true');
			            if (loop) {
			                player.setAttribute('loop', 'infinite');
			            }
			            document.body.appendChild(player);

			        } else { // Other FF Chome Safari Opera 
			            var player = document.createElement('audio');
			            player.id = id;
			            player.setAttribute('autoplay', 'autoplay');
			            if (loop) {
			                player.setAttribute('loop', 'loop');
			            }
			            document.body.appendChild(player);

			            var mp3 = document.createElement('source');
			            mp3.src = file['mp3'];
			            mp3.type = 'audio/mpeg';
			            player.appendChild(mp3);
			        }
			    }
			}
		};
		Date.prototype.format = function(fmt) { 
			 var o = { 
				"M+" : this.getMonth()+1,                 //月份 
				"d+" : this.getDate(),                    //日 
				"h+" : this.getHours(),                   //小时 
				"m+" : this.getMinutes(),                 //分 
				"s+" : this.getSeconds(),                 //秒 
				"q+" : Math.floor((this.getMonth()+3)/3), //季度 
				"S"  : this.getMilliseconds()             //毫秒 
			}; 
			if(/(y+)/.test(fmt)) {
					fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
			}
			 for(var k in o) {
				if(new RegExp("("+ k +")").test(fmt)){
					 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
				 }
			 }
			return fmt; 
		} 
		var R3Helper = {
			resize : function(){
				var height = document.body.offsetHeight ;
				document.getElementById('above').style.height = (height - 194 - 50)+"px" ;
			}
		}
		function submitForm(form){
			R3Ajax.post("/im/satis.html?orgi=${orgi!''}" , function(){
				document.getElementById("diaShade").style.display = "none" ;
				document.getElementById("dialogWrap").style.display = "none" ;
				alert("服务评价已提及，请关闭浏览器！");
				service_end = true;
			} , "id="+form.id.value+"&satislevel="+document.getElementById("satislevel_input").value +"&satiscomment="+encodeURIComponent(document.getElementById("comment_input").value ));
			return false ;
		}
		window.onbeforeunload = function(){
			if(service_end == false){				
				<#if sessionConfig?? && sessionConfig.satisfaction?? && sessionConfig.satisfaction>
				document.getElementById("diaShade").style.display = "block" ;
				document.getElementById("dialogWrap").style.display = "block" ;
				</#if>
				return "您确定断开对话？" ;
			}
		}

    </script>
    <!-- kindeditor -->
</head>
<body style="overflow:hidden;" class="ukefu-point-text">
<div class="large ukefu-im-theme <#if type?? && type='text'>ukefu-theme-border-${inviteData.consult_dialog_color!''}</#if>">
    <div id="containter" class="clearfix">
    	<div id="header" class="theme${inviteData.consult_dialog_color!''}">
	   		<img src="<#if inviteData?? && inviteData.consult_dialog_logo??>/res/image.html?id=${inviteData.consult_dialog_logo?url}<#else>/images/logo.png</#if>" style="height:30px;padding:10px;">
	   		<div class="ukefu-func-tab">
		   		<ul>
		   			<#if models?? && models["chatbot"]?? && models["chatbot"] == true && inviteData.ai && aiid??>
		   				<#if !exchange?? || exchange == "true">
		   				<li><a href="/im/index.html?appid=${appid!''}&orgi=${orgi!''}<#if aiid??>&aiid=${aiid}</#if>&ai=true<#if client??>&client=${client!''}</#if><#if type??>&type=text</#if><#if skill??>&skill=${skill!''}</#if><#if agent??>&agent=${agent!''}</#if><#if title??>&title=${title?url}</#if><#if url??>&url=${url?url}</#if><#if traceid??>&traceid=${traceid}</#if>&userid=${userid!''}&sessionid=${sessionid!''}&t=${.now?long}">智能客服</a></li>
		   				</#if>
		   				<li class="cur"><a href="javascript:void(0)">人工坐席</a></li>
		   			<#else>
		   				<li class="cur"><a href="javascript:void(0)">人工坐席</a></li>
		   			</#if>
		   		</ul>
	   		</div>
	    </div>
        <div class="content-left">
            <div class="chat-above" id="above">
            	<#if welcomeAd>
            	<div class="clearfix message  welcome"> 
            		<span id="welcome-message">
            			<#if welcomeAd.adtype =="image">
						<a href='${welcomeAd.url!''}' title='${welcomeAd.tiptext!''}' target='_blank'><img src='${welcomeAd.imgurl!''}' style='max-width:420px;max-height:178px;margin:0px;vertical-align: middle;'/></a>
						<#else>
						<div style='padding:0px 5px 10px 5px;border-bottom:1px solid #dedede;'><a href='${welcomeAd.url!''}' title='${welcomeAd.tiptext!''}' target='_blank' id='point_ad_text'>${(welcomeAd.content!'')?no_esc}</a></div>
						</#if>
            		</span>
            	</div>
            	</#if>
            	<div class="clearfix message  welcome"> 
            		<span id="welcome-message">${(inviteData.dialog_message!'欢迎您来咨询！欢迎使用春松客服！如需帮助请联系 info@chatopera.com')?no_esc}</span></div>
				<#if chatMessageList?? && chatMessageList.content??>
					<#list chatMessageList.content?reverse as chatMessage>
						<#if chatMessage.userid?? && userid?? && chatMessage.calltype?? && chatMessage.calltype = "呼入">
							<div class="clearfix chat-block">
								<div class="chat-right"> 
									<img class="user-img" src="/im/img/user.png" alt="">
									<div class="chat-message">
										<label class="time">${chatMessage.createtime!''}</label>
										<label class="user">${chatMessage.username!''}</label> 
									</div>
									<div class="chatting-right">
										<i class="arrow arrow${inviteData.consult_dialog_color!''}"></i>
										<div class="chat-content theme${inviteData.consult_dialog_color!''}"><#include "/apps/im/media/message.html"></div>
									</div>
								</div>
							</div>
						<#else>
							<div class="clearfix chat-block">
								<div class="chat-left"> 
									<img class="user-img" src="<#if inviteData?? && inviteData.consult_dialog_headimg??>/res/image.html?id=${inviteData.consult_dialog_headimg?url}<#else>/images/agent.png</#if>" alt="">
									<div class="chat-message">
										<label class="user"><#if chatMessage?? && chatMessage.chatype?? && chatMessage.chatype == 'aireply'>${inviteData.ainame!'小松'}<#else>${chatMessage.username!''}</#if></label>
										<label class="time">${chatMessage.createtime!''}</label>										
									</div>
									<div class="chatting-left">
										<i class="arrow"></i>
										<div class="chat-content"><#include "/apps/im/media/message.html"></div>
									</div>
								</div>
							</div>
						</#if>
					</#list>
				</#if>
			</div>
            <div class="chat-bottom" id="bottom">
				<textarea id="message" name="content" style="visibility:hidden;"></textarea>
				<div class="btn-push clearfix">
					<div style="float:left;height:34px;line-height:34px;margin: 10px 20px 10px 5px;" id="surplus">0/200</div>
					<button type="button" class="send-btn active special  clearfix" id="sent" onclick="sendMessage()">
						发送
					</button>
				</div>
			</div>
        </div>
        <div class="content-rig">
            <div class="content-list" style="padding-top:50px;">
            	<div class="content-head">
	                <p>信息提示</p>
	            </div>
                <ul>
                	<#if inviteData.dialog_name?? && inviteData.dialog_name != "">
                    <li>
                        <p>名称：${inviteData.dialog_name!''}</p>
                    </li>
                    </#if>
                    <#if inviteData.dialog_address?? && inviteData.dialog_address != "">
                    <li>
                        <p>地址：${inviteData.dialog_address!''}</p>
                    </li>
                    </#if>
                    <#if inviteData.dialog_phone?? && inviteData.dialog_phone != "">
                    <li>
                        <p>电话：${inviteData.dialog_phone!''}</p>
                    </li>
                    </#if>
                    <#if inviteData.dialog_mail?? && inviteData.dialog_mail != "">
                    <li>
                        <p>邮件：${inviteData.dialog_mail!''}</p>
                    </li>
                    </#if>
                    <#if inviteData.dialog_mail?? && inviteData.dialog_introduction != "">
                    <li>
                        <p style="text-indent:25px;line-height:25px;">${(inviteData.dialog_introduction!'')?no_esc}</p>
                    </li>
                    </#if>
                </ul>
            </div>
            <div class="content-pic" style="width:100%;height:192px;">
            	<#if imageAd>
            		<#if imageAd.adtype =="image">
					<a href='${imageAd.url!''}' title='${imageAd.tiptext!''}' target='_blank'><img src='${imageAd.imgurl!''}' style='max-width:100%;max-height:190px;margin:0px;vertical-align: middle;'/></a>
					<#else>
					<div style='padding:0px 5px 10px 5px;border-bottom:1px solid #dedede;'><a href='${imageAd.url!''}' title='${imageAd.tiptext!''}' target='_blank' id='point_ad_text'>${(imageAd.content!'')?no_esc}</a></div>
					</#if>
            	<#elseif inviteData.dialog_ad??>
                	<img src="/res/image.html?id=${inviteData.dialog_ad!''}" style="height:190px;width:100%;">
            	</#if>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</div>
<#if sessionConfig?? && sessionConfig.satisfaction?? && sessionConfig.satisfaction>
<!--调查问卷弹框-->
<div class="diaShade" id="diaShade" style="display: none"></div>
<div class="dialogWrap" id="dialogWrap" style="display: none">
    <div class="dialogCon">
        <form id="commentContent" onSubmit="return submitForm(this)">
        	<input type="hidden" name="id" id="agentserviceid" name="agentserviceid">
            <h2 class="diaHeader clearfix">
                <span>评价</span>
                <hr>
            </h2>
            <p class="title">您是否对此次服务满意?</p>
            <!--评价-->
           <p style="margin-top:20px;">
                <span style="float:left;">评价：</span>
                <span style="position: relative;top: 0px;left: 13px;">
                <#assign defaultvalue = "">
                <#if commentList??>
                <#list commentList as comment>
                <input type="radio" name="satislevel" value="${comment.code!''}" <#if comment_index == 0>checked="checked"</#if> id="dic_${comment.id!''}" onclick="document.getElementById('satislevel_input').value = this.value">
                <label for="dic_${comment.id!''}" class="radio">${comment.name!''}</label>
                <#if defaultvalue == "">
                <#assign defaultvalue = comment.code>
                </#if>
                </#list>
                </#if>
                <input type="hidden" id="satislevel_input" name="t" value="${defaultvalue}">
                </span>
            </p>
            <!--描述-->
            <p style="margin-top:20px;">
                <span style="float:left;">意见：</span>
                <span style="position: relative;top: 0px;left: 10px;">
                	<input type="hidden" id="comment_input" name="t">
                	<#if commentItemList??>
                	<#list commentItemList as item>
                	<div style="margin-left:55px;margin-bottom:20px;">
                		<input type="radio" name="comment" id="item_${item.id!''}" value="${item.id!''}" onclick="document.getElementById('comment_input').value = this.value">
                		<label for="item_${item.id!''}" class="radio">
                			${item.name!''}
                		</label>
                	</div>
                	</#list>
                	</#if>
                </span>
            </p>
            <!--按钮-->
            <p class="submitBtnWrap">
				<input type="submit" class="btn submitBtn" id="submitBtn" value="提 交">
            </p>
        </form>
    </div>
</div>
</#if>
<script>
	var service_end = false ;
	R3Helper.resize();
    // 调查问卷
    var diaShade=document.getElementById('diaShade');
    var dialogWrap=document.getElementById('dialogWrap');
    function popup(para) {
        diaShade.style.display=para;
        dialogWrap.style.display=para;
    }
    <#if !welcomeAd>
    document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight  ;	//滚动到 对话内容的 底部
    </#if>
    // 参数连接
	var hostname = location.hostname ;
    var protocol = window.location.protocol.replace(/:/g,'');
    var socket = io(protocol + '://'+hostname+':${port}/im/user?userid=${userid!''}&orgi=${orgi!''}&session=${sessionid!''}&appid=${appid!''}&osname=${(osname!'')?url}&browser=${(browser!'')?url}<#if skill??>&skill=${skill}</#if><#if username??>&nickname=${username}</#if><#if agent??>&agent=${agent}</#if><#if title??>&title=${title?url}</#if><#if traceid??>&url=${url?url}</#if><#if traceid??>&traceid=${traceid}</#if>', {transports: ['websocket', 'polling']});
    socket.on('connect',function(){
    	console.log("on connect ...");
        <#if contacts?? && contacts.name??>
    	socket.emit('new', {
			name : "${contacts.name!''}",
			phone:"${contacts.phone!''}",
			email:"${contacts.email}",
			memo:"${contacts.memo!''}",
			orgi:"${inviteData.orgi!''}",
			appid : "${appid!''}"
		});
    	</#if>
    })
    socket.on("agentstatus",function(data){
       document.getElementById('connect-message').innerHTML=data.message;
    })
    socket.on("status",function(data){
    	<#if welcomeAd>
		output('<span id="connect-message">'+data.message+'</span>' , 'message connect-message' , false);
		<#else>
		output('<span id="connect-message">'+data.message+'</span>' , 'message connect-message' , true);
		</#if>     
		if(data.messageType == "end"){
			service_end = true ;
			editor.readonly();
			<#if sessionConfig?? && sessionConfig.satisfaction?? && sessionConfig.satisfaction>
			
			document.getElementById("diaShade").style.display = "block" ;
			document.getElementById("dialogWrap").style.display = "block" ;
			</#if>
		}
		if(document.getElementById("agentserviceid")){
			document.getElementById("agentserviceid").value = data.agentserviceid ;
		}
    })
    socket.on('message', function(data) {
        console.log("on message", data);
        var chat=document.getElementsByClassName('chatting-left').innerText;
        chat = data.message;
        if(data.messageType == "image"){
        	chat = "<a href='"+data.message+"&original=true' target='_blank'><img src='"+data.message+"' class='ukefu-media-image'/></a>" ;
        }else if(data.messageType == "file"){
        	chat = "<div class='ukefu-message-file'><div class='ukefu-file-icon'><img src='/im/img/file.png'></div><div class='ukefu-file-desc'><a href='"+data.message+"' target='_blank'><div>"+data.filename+"</div><div>"+(data.filesize/1024).toFixed(3)+"Kb</div></a></div></div>" ;
        }
		if(data.calltype == "呼入"){
			output('<div class="chat-right"> <img class="user-img" src="/im/img/user.png" alt=""><div class="chat-message"><label class="time">'+data.createtime+'</label><label  class="user">'+data.nickName+'</label> </div><div class="chatting-right"><i class="arrow arrow${inviteData.consult_dialog_color!''}"></i><div class="chat-content theme${inviteData.consult_dialog_color!''}">'+chat+'</div></div>' , "chat-block");
		}else if(data.calltype == "呼出"){
			output('<div class="chat-left"> <img class="user-img" src="<#if inviteData?? && inviteData.consult_dialog_headimg??>/res/image.html?id=${inviteData.consult_dialog_headimg?url}<#else>/images/agent.png</#if>" alt=""><div class="chat-message"><label  class="user">'+data.nickName+'</label><label class="time">'+data.createtime+'</label> </div><div class="chatting-left"><i class="arrow"></i><div class="chat-content">'+chat+'</div></div>' , "chat-block");
			R3Ajax.audioplayer('audioplane', newmessage, false); // 播放
		}
    });
    
    socket.on('disconnect',function() {
        output('<span id="connect-message">连接坐席失败，在线咨询服务不可用</span>' , 'message connect-message');
    });
    function sendDisconnect(){
        socket.disconnect();
    }
    function sendMessage() {
		editor.sync();
		var count = editor.count("text");
		if(count>0 && service_end == false){
	        var message = document.getElementById('message').value;
	        if(message!= ""){ 
				socket.emit('message', {
						appid : "${appid!''}",
						userid:"${userid!''}",
						type:"message" ,
						session:"${sessionid!''}",
						orgi:"${orgi!''}",
						message :  message
				});
			}
		}else if(service_end == true){
			alert("坐席已断开和您的对话");	
		}
		editor.html('');
    }
    function output(message , clazz , scroll) {
		if(clazz == "message connect-message"){
			var messages = document.getElementsByClassName("connect-message") ;
			for(inx =0 ; inx < messages.length ; ){
				document.getElementById('above').removeChild(messages[inx]) ;
				inx++ ;
			}			
		}
        var element = ("<div class='clearfix "+clazz+"'>" +" " + message + "</div>");
        document.getElementById('above').innerHTML= (document.getElementById('above').innerHTML + element);
        if(scroll == null || scroll == true){
			document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight  ;
		}
    }
	function update(id , message) {
        document.getElementById(id).innerHTML= message;
    }
    
    var message={
        // text:data.message,
        // picture:function(){

        // }
        // file:function(){

        // }
        // lang:function(){

        // }
        // goods:function(){

        // }
        // POI:function(){

        // }

    }
    // 回车事件
    document.onkeyup=function(e){
        if(!e) e=window.event;
        if((e.keyCode||e.which)==13){
            document.getElementById('sent').click();
        }
    }
	window.onresize = function(){
		R3Helper.resize();		
	};
</script>
</body>
</html>
